import styles from "./index.module.scss";
import { Pagination, Tooltip } from "antd";
import { useDispatch, useSelector } from "react-redux";
import closeBtn from "@/assets/public/close-btn.png";
import closeBtnLight from "@/assets/public/close-btn-light.png";
import { setLayersLevel2 } from "@/store";

export default function Model(props) {
  const dispatch = useDispatch();
  const { name } = props;
  const theme = useSelector((state) => state.theme);
  const layers = useSelector((state) => {
    return state.layersLevel2;
  });
  const handleClose = () => {
    dispatch(
      setLayersLevel2({
        query: {},
        name: "",
        other: {},
      })
    );
  };

  const getValue = (value) => {
    console.log(value);
  };
  return (
    <div className={styles.model}>
      <header className={styles.header}>
        {theme ? (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtnLight}
            alt="加载中..."
          />
        ) : (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtn}
            alt="加载中..."
          />
        )}
        <span className={styles.title}>{name}</span>
      </header>
      <div className={styles.detail}>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>姓名</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="姓名">
              姓名
            </span>
          </div>
          <div className={styles.detailName}>电话</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="电话">
              电话
            </span>
          </div>
          <div className={styles.detailName}>性别</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="性别">
              性别
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>身份证</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="身份证">
              身份证
            </span>
          </div>
          <div className={styles.detailName}>部门</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="部门">
              部门
            </span>
          </div>
          <div className={styles.detailName}>员工编号</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="员工编号">
              员工编号
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>一级项目</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="一级项目">
              一级项目
            </span>
          </div>
          <div className={styles.detailName}>二级项目</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="二级项目">
              二级项目
            </span>
          </div>
          <div className={styles.detailName}>职业</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="职业">
              职业
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>人员类型</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="人员类型">
              人员类型
            </span>
          </div>
          <div className={styles.detailName}>供应商</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="供应商">
              供应商
            </span>
          </div>
          <div className={styles.detailName}>产品线厂商</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="产品线厂商">
              产品线厂商
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>专业岗位</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="专业岗位">
              专业岗位
            </span>
          </div>
          <div className={styles.detailName}>岗位级别</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="岗位级别">
              岗位级别
            </span>
          </div>
          <div className={styles.detailName}>人员状态</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="人员状态">
              人员状态
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>风险标识</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="风险标识">
              风险标识
            </span>
          </div>
          <div className={styles.detailName}>Uniportal帐号</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="Uniportal帐号">
              Uniportal帐号
            </span>
          </div>
          <div className={styles.detailName}>邮箱</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="邮箱">
              邮箱
            </span>
          </div>
        </div>

        <div className={styles.detailLine}>
          <div className={styles.detailName}>钉钉id</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="钉钉id">
              钉钉id
            </span>
          </div>
          <div className={styles.detailName}>居住地址</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="居住地址">
              居住地址
            </span>
          </div>
          <div className={styles.detailName}>政治面貌</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="政治面貌">
              政治面貌
            </span>
          </div>
        </div>

        <div className={styles.detailLine}>
          <div className={styles.detailName}>婚姻状况</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="婚姻状况">
              婚姻状况
            </span>
          </div>
          <div className={styles.detailName}>毕业院校</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="毕业院校">
              毕业院校
            </span>
          </div>
          <div className={styles.detailName}>专业</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="专业">
              专业
            </span>
          </div>
        </div>

        <div className={styles.detailLine}>
          <div className={styles.detailName}>毕业时间</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="毕业时间">
              毕业时间
            </span>
          </div>
          <div className={styles.detailName}>学历</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="学历">
              学历
            </span>
          </div>
          <div className={styles.detailName}>入职时间</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="入职时间">
              入职时间
            </span>
          </div>
        </div>

        <div className={styles.detailLine}>
          <div className={styles.detailName}>离职时间</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="离职时间">
              离职时间
            </span>
          </div>
          <div className={styles.detailName}>直属主管</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="直属主管">
              直属主管
            </span>
          </div>
          <div className={styles.detailName}></div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title=""></span>
          </div>
        </div>
      </div>
    </div>
  );
}
